<template>
	<!-- 页面整体容器 -->
	<view>
		<!-- 顶部提示信息区域 -->
		<view class="top-prompt">
			<!-- 提示信息文本 -->
			<text>信息仅用于实名认证，智运保障您的信息安全</text>
		</view>
		<!-- 驾驶证上传提示区域 -->
		<view class="content">
			<!-- 左侧蓝色竖条 -->
			<view class="box"></view>
			<!-- 提示文本 -->
			<view class="photo"><text>请上传身份证照片</text></view>
		</view>
		<view class="file-upload">
			<!-- 上传身份证正面 -->
			<view class="upload-btn" @click="uploadFrontImage">
				<!-- 当没有上传图片时，显示默认提示图 -->
				<view v-if="!frontImage" class="upload-icon-wrapper">
					<view class="upload-icon1">
						<image src="/photo/driver-autnentication/camera-upload.png"
							style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<text class="upload-text">上传身份证正面</text>
				</view>
				<!-- 当上传图片时，显示上传的图片 -->
				<view class="upload-btn uploaded" v-else>
					<image :src="frontImage" class="upload-icon" />
					<view class="close-btn" @click.stop="removeFrontImage">×</view>
				</view>
			</view>
			<!-- 上传身份证背面 -->
			<view class="upload-btn" @click="uploadBackImage">
				<!-- 当没有上传图片时，显示默认提示图 -->
				<view v-if="!backImage" class="upload-icon-wrapper">
					<view class="upload-icon2">
						<image src="/photo/driver-autnentication/camera-upload.png"
							style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<text class="upload-text">上传身份证背面</text>
				</view>
				<!-- 当上传图片时，显示上传的图片 -->
				<view class="upload-btn uploaded" v-else>
					<image :src="backImage" class="upload-icon" />
					<view class="close-btn" @click.stop="removeBackImage">×</view>
				</view>
			</view>
		</view>
		<!-- 从业资格证上传提示区域 -->
		<view class="content">
			<!-- 左侧蓝色竖条 -->
			<view class="box"></view>
			<!-- 提示文本 -->
			<view class="photo"><text>请上传从业资格证照片</text></view>
		</view>
		<!-- 上传资格证 -->
		<view class="upload-btn" @click="uploadQualificationImage">
			<!-- 当没有上传图片时，显示默认提示图 -->
			<view v-if="!qualificationImage" class="upload-icon-wrapper">
				<view class="upload-icon2">
					<image src="/photo/driver-autnentication/camera-upload.png" style="width: 50rpx; height: 50rpx;">
					</image>
				</view>
				<text class="upload-text">上传资格证</text>
			</view>
			<!-- 当上传图片时，显示上传的图片 -->
			<view class="upload-btn uploaded" v-else>
				<image :src="qualificationImage" class="upload-icon" />
				<view class="close-btn" @click.stop="removeQualificationImage">×</view>
			</view>
		</view>

		<!-- 提交审核按钮，点击触发提交审核事件 -->
		<button class="submit-btn" @click="submitReview">提交审核</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		tokenStore
	} from '@/stores/token';
	//存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';
	//引入拦截器
	import '@/config/requst.js'
	import {
		http
	} from '@/config/requst.js';
	// 使用 ref 存储上传的图片路径
	const frontImage = ref(null);
	const backImage = ref(null);
	const qualificationImage = ref(null);
	const driver = ref({})

	// 上传身份证正面图片
	const uploadFrontImage = () => {
		wx.chooseImage({
			count: 1,
			success(res) {
				frontImage.value = res.tempFilePaths[0]; // 获取并存储正面图片路径
				console.log("上传身份证正面图", frontImage);
				uni.uploadFile({
					url: 'http://localhost:8080/realname/idcard', // 请确保这是正确的后端地址
					filePath: frontImage.value, // 文件路径
					name: 'file', // 文件字段名
					formData: {
						'user': 'test' // 表单数据
					},
					header: {
						'Authorization': tokenStore().token // 携带token
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data); // 打印上传成功返回的数据
						let i = JSON.parse(uploadFileRes.data);
						console.log(i)
						driver.value = i.shuju
					},
					fail: (err) => {
						console.error('上传失败:', err); // 打印上传失败错误信息
					}
				});
			},
			fail(err) {
				console.log("上传身份证正面图失败", err);
			}
		});
	};

	// 上传身份证背面图片
	const uploadBackImage = () => {
		wx.chooseImage({
			count: 1,
			success(res) {
				backImage.value = res.tempFilePaths[0]; // 获取并存储背面图片路径
				console.log("上传身份证背面图", res);
				uni.uploadFile({
					url: 'http://localhost:8080/realname/idcard', // 请确保这是正确的后端地址
					filePath: backImage.value, // 文件路径
					name: 'file', // 文件字段名
					formData: {
						'user': 'test' // 表单数据
					},
					header: {
						'Authorization': tokenStore().token // 携带token
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data); // 打印上传成功返回的数据
						let i = JSON.parse(uploadFileRes.data);
						driver.value.expiration = i.shuju.expiration
						driver.value.imagef = i.shuju.imagef
						driver.value.qianf = i.shuju.qianf
					},
					fail: (err) => {
						console.error('上传失败:', err); // 打印上传失败错误信息
					}
				});
			},
			fail(err) {
				console.log("上传身份证背面图失败", err);
			}
		});
	};


	// 上传从业资格证图片
	const uploadQualificationImage = () => {
		wx.chooseImage({
			count: 1,
			success(res) {
				qualificationImage.value = res.tempFilePaths[0]; // 获取并存储资格证图片路径
				console.log("上传从业资格证图", res);
				uni.uploadFile({
					url: 'http://localhost:8080/realname/qualification', // 请确保这是正确的后端地址
					filePath: qualificationImage.value, // 文件路径
					name: 'file', // 文件字段名
					formData: {
						'user': 'test' // 表单数据
					},
					header: {
						'Authorization': tokenStore().token // 携带token
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data); // 打印上传成功返回的数据
						let i = JSON.parse(uploadFileRes.data);
						driver.value.qualification = i.shuju
					},
					fail: (err) => {
						console.error('上传失败:', err); // 打印上传失败错误信息
					}
				});
			},
			fail(err) {
				console.log("上传从业资格证图失败", err);
			}
		});
	};


	// 删除身份证正面图
	const removeFrontImage = () => {
		frontImage.value = null;
	};

	// 删除身份证背面图
	const removeBackImage = () => {
		backImage.value = null;
	};

	// 删除从业资格证图
	const removeQualificationImage = () => {
		qualificationImage.value = null;
	};

	// 提交审核的方法
	const submitReview = () => {
		// 校验图片路径变量是否为空
		if (!frontImage.value || !backImage.value || !qualificationImage.value) {
			console.log('请上传所有需要的图片');
			return;
		}

		console.log(driver.value)
		tj()
	};

	const tj = async () => {
		driver.value.did = userStore().user.id
		const res = await http({
			method: 'post',
			url: '/realname/ins',
			data: driver.value
		})
		console.log(res);
		if (res.code == 20041) {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/authentication/authentication'
				});
			}, 2000);
		} else {
			uni.showToast({
				title: '提交失败',
				icon: 'error',
				duration: 2000
			});
		}
	}
</script>

<style lang="scss" scoped>
	/* 顶部提示信息样式 */
	.top-prompt {
		width: 700rpx;
		height: 80rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 10rpx auto;
		border-radius: 15rpx;
		background-color: #708ac2;
		color: white;
	}

	/* 上传提示区域样式 */
	.content {
		display: flex;
		align-items: center;
		margin-top: 50rpx;

		/* 左侧蓝色竖条样式 */
		.box {
			width: 10rpx;
			height: 50rpx;
			background-color: #073496;
			border-radius: 20rpx;
			margin-left: 20rpx;
		}

		/* 提示文本样式 */
		.photo {
			line-height: 50rpx;
			margin-left: 10rpx;
		}
	}

	.file-upload {
		display: flex;
		justify-content: space-around;
	}

	.upload-btn {
		margin: 20rpx;
		width: 43%;
		height: 180rpx;
		background-color: #f1f1f1;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.upload-icon-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		position: relative;
	}

	.upload-text {
		font-size: 24rpx;
		color: #868686;
	}

	.upload-icon {
		width: 300rpx;
		height: 300rpx;
		background-size: cover;
		/* 保证图片完全覆盖框，并保持长宽比 */
		border-radius: 10rpx;
	}

	.uploaded {
		position: relative;
	}

	.close-btn {
		position: absolute;
		top: 5rpx;
		right: -60rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 28rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
	}

	/* 提交审核按钮样式 */
	.submit-btn {
		background-color: #5a98ff;
		color: white;
		padding: 15rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		margin: 100rpx auto;
		display: block;
		width: 80%;
	}
</style>